<template>
  <view class="firstPage">
    <wm-watermark text="数据可视化项目" />
    <view class="title_wrap">
      <view class="title_text">uniapp + ucharts 数据可视化</view>
      <view class="title_time">时间: 2025.10.01</view>
    </view>
    <CharBg
      v-for="(item, idx) in chartList"
      style="margin-bottom: 62rpx"
      :key="idx"
    >
      <view class="chart_item">
        <qiun-data-charts
          v-if="item.type !== 'map'"
          :type="item.type"
          :chartData="item.chartData"
          :echartsH5="true"
          :eopts="item.eopts"
          :opts="item.opts"
          @getIndex="(e) => clickCharts(e, item)"
        />
        <qiun-data-charts
          v-else
          :type="item.type"
          :chartData="item.chartData"
          :opts="item.eopts"
          @getIndex="(e) => clickCharts(e, item)"
        />
      </view>
      <!-- 地图步进器 -->
      <!-- <view v-if="item.type == 'map'" class="slider_wrap">
        <van-slider
          v-model="zoomVal"
          :bar-height="5"
          :button-size="9"
          active-color="#00BAFF"
          inactive-color="#0C77EB"
          :max="8"
          :min="1"
          :step="0.1"
          @change="sliderChange"
        />
        <div class="p_img_wrap p_p_img_wrap" @click="clickSlider('plus')">
          <img src="@/common/images/icon/plus.png" />
        </div>
        <div class="p_img_wrap p_m_img_wrap" @click="clickSlider('minu')">
          <img src="@/common/images/icon/minu.png" />
        </div>
      </view> -->
    </CharBg>
    <!-- <Back /> -->
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import CharBg from '@/components/charBg/charBg.vue';
// import Back from '@/components/back/back.vue';
// import styleList from '@/common/js/styleList.js';

import {
  handleRadar,
  handleMap,
  handleZfBar,
  handleBfBar,
  handlePie,
} from '@/utils/firstFloor.js';

const chartList = ref<
  {
    chartData: any;
    eopts: any;
    opts: any;
    height: string;
    type: string;
  }[]
>([]);
// const opts = ref({
//   padding: [0, 0, 0, 0],
//   dataLabel: true,
//   enableScroll: false,
//   fontColor: '#fff',
//   extra: {
//     map: {
//       border: true,
//       borderWidth: 1,
//       borderColor: '#666666',
//       fillOpacity: 0.6,
//       activeBorderColor: '#F04864',
//       activeFillColor: '#FACC14',
//       activeFillOpacity: 1,
//     },
//   },
// });
// import gd from '@/common/json/gd.json';
// const chartData = ref({
//   series: gd.features.map((e) => ({
//     ...e,
//   })),
// });

onMounted(() => {
  getData();
});

// const zoomVal = ref(1);

// 步进器改变
// function sliderChange(val) {
//   let mapObj = chartList.value.find((e) => e.type == 'map')?.eopts;
//   mapObj.zoom = val;

//   if (val > 1 && !mapObj.roam) {
//     delete mapObj.center;
//     mapObj.roam = true;
//   }
//   if (val == 1) {
//     mapObj.center = [113.57, 23.11];
//     mapObj.roam = false;
//   }
// }
// // 点击步进器
// function clickSlider(type) {
//   let mapObj = chartList.value.find((e) => e.type == 'map')?.eopts;
//   if (type == 'plus') {
//     delete mapObj.center;
//     mapObj.roam = true;
//     zoomVal.value < 8 && ++zoomVal.value && ++mapObj.zoom;
//     if (zoomVal.value > 8) {
//       zoomVal.value = mapObj.zoom = 8;
//     }
//   } else {
//     zoomVal.value > 1 && --zoomVal.value && --mapObj.zoom;
//     if (zoomVal.value < 1) {
//       mapObj.center = [113.57, 23.11];
//       mapObj.roam = false;
//       zoomVal.value = mapObj.zoom = 1;
//     }
//   }
//   console.log(mapObj, ' mapObj ');
// }
function getData() {
  chartList.value = [
    {
      ...handleMap(),
    },
    {
      ...handleRadar(),
    },
    {
      ...handlePie(),
    },
    {
      ...handleZfBar(),
    },
    {
      ...handleBfBar(),
    },
  ];
}
import { showToast } from 'vant';
import 'vant/lib/toast/style/index';
function clickCharts(e, item) {
  console.log(e, item, ' e, item');
  showToast(item.type);
}
</script>

<style lang="scss" scoped>
.firstPage {
  background-image: url('@/common/images/home/main-bg.png');
  background-size: 100% auto;
  background-repeat: repeat;
  min-height: 100vh;
  padding-bottom: 64rpx;
  .tabs_wrap {
    padding: 43rpx 0 34rpx;
  }
  .tips_wrap {
    padding: 20rpx 45rpx;
  }
  .chart_item {
    width: 666rpx;
    height: 650rpx;
  }
  .title_wrap {
    padding: 36rpx 0 28rpx;
    text-align: center;
    line-height: 39rpx;
    .title_text {
      font-size: 30rpx;
      font-weight: bold;
      color: #24e8ff;
    }
    .title_time {
      font-size: 24rpx;
      color: #5fa7ff;
    }
  }
  .slider_wrap {
    position: relative;
    padding: 10rpx 90rpx;
    ::deep(.van-slider__button) {
      border: 6rpx solid #24e8ff;
      background: #0c77eb;
    }
    .p_img_wrap {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 34rpx;
      height: 34rpx;
      img {
        width: 100%;
      }
    }
    .p_p_img_wrap {
      right: 42rpx;
    }
    .p_m_img_wrap {
      left: 38rpx;
    }
  }
  .map_tip_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14rpx 0;
    .tip_text {
      font-size: 26rpx;
      color: #f7b584;
    }
    .home_describe_icon_wrap {
      width: 36rpx;
      height: 36rpx;
      padding-left: 12rpx;
      img {
        width: 100%;
      }
    }
  }
}
</style>
